<template>
	<view>
		<image class="image posiab" mode="widthFix" src="/static/beijgis.png"></image>
		<view class="con posire" :style="{paddingTop: systemInfoHeight+'px'}">
			<view class="flex-ju-c posiab" style="width: 60rpx;height: 60rpx;border-radius: 30rpx;border: 1px solid #FFFFFF;">
				<u-icon color="#4D4D4D" name="arrow-left"></u-icon>
			</view>
			<view class="flex-ju-c" style="color:#333333;" >
				活动详情
			</view>
			
			<view class="flex-ju-c mt30">
				<image mode="widthFix" class="image flex" style="width:550rpx;" src="/static/chouajing.png"></image>
			</view>
			
			<view class="flex-ju-c mt20 posire">
				<view class="posiab colorfff size13 flex-ju-c ml20">
					10天13时34分22秒后开奖
				</view>
				<image mode="widthFix" class="image flex" style="width:420rpx;margin-top:2px;" src="/static/kaijiang.png"></image>
			</view>
		</view>
		<image mode="widthFix" @click="touser" class="image flex posiab" style="width:130rpx;right:0;margin-top:-20px;" src="/static/wode.png"></image>
		<view class="con mt20 " style="padding-bottom:100px;">
			<image mode="widthFix" class="image flex "  src="/static/images/tabbar/jis.png"></image>
			<view class="posire flex-a-i">
				<view class="posiab size16 bold ml20" style="color:#333;">
					LABUBU-坐坐派对搪胶毛绒系列
					<view>￥79</view>
				</view>
				<image mode="widthFix" class="image flex "  src="/static/beijinga.png"></image>
			</view>
			<view class="bgfff p30 mb15" style="border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;">
				<view class="flex-a-i ">
					<view class="mr10" style="width: 6rpx;height: 24rpx;background: #24C891;border-radius: 3rpx;"></view>
					活动规则
				</view>
				<view class="size12 mt10" style="color:#666;line-height: 25px;">
					<view>
						1.登录可领取一个抽选码，下载APP登录可再领取一个；连续登录一周可再获得一个抽选码。
					</view>
					<view>					2.一番赏开盒一次可获得1个抽选码，上限3个；</view>
					<view>					3.可分享给好友助力获取更多抽奖码，每分享1个好友助力增加1个抽选码；分享达X个好友可额外获得X个抽选码</view>
					<view>					4.每个用户活动期间内只能助力一次，已助力过的无法再给别的好友助力；</view>
					<view>					5.开奖结果以抽奖码为准，开奖后抽奖结果将公示在此活动页下方；</view>
				</view>
				<view class="flex-a-i mt20">
					<view class="mr10" style="width: 6rpx;height: 24rpx;background: #24C891;border-radius: 3rpx;"></view>
					活动规则
				</view>
				<view class="flex-ju-b size12 p30 mt10" style="background: #E9F6FB;height:100rpx;color:#333;border-radius: 15rpx;">
					<view class="bold">一等奖:THE MONSTERS-IFO…</view>
					<view class="" style="color:#666;">抽1份/期</view>
				</view>
				<view class="flex-ju-b size12 p30 mt10" style="background: #E9F6FB;height:100rpx;color:#333;border-radius: 15rpx;">
					<view class="bold">一等奖:THE MONSTERS-IFO…</view>
					<view class="" style="color:#666;">抽1份/期</view>
				</view>
				<view class="flex-ju-b size12 p30 mt10" style="background: #E9F6FB;height:100rpx;color:#333;border-radius: 15rpx;">
					<view class="bold">一等奖:THE MONSTERS-IFO…</view>
					<view class="" style="color:#666;">抽1份/期</view>
				</view>
				<view class="flex-ju-b size12 p30 mt10" style="background: #E9F6FB;height:100rpx;color:#333;border-radius: 15rpx;">
					<view class="bold">一等奖:THE MONSTERS-IFO…</view>
					<view class="" style="color:#666;">抽1份/期</view>
				</view>
			</view>
			
			<view class="posire">
				<view class="flex-ju-b posire " style="width:100%;">
					<view class=" size16 bold mt15 ml20">
						当期参与6460人
					</view>
					<view class="mr30 mt15 size13 flex-ju-c" style="color:#8D8D99;">MORE <u-icon color="#8D8D99" style="margin-top:2px;margin-left: 2px;" size="20" class="" name="arrow-right"></u-icon></view>
				</view>
				<view class="flex-ju-a mt30 posire" style="color:#4D4D4D;">
					<view v-for="item in 5" class="">
						<image mode="widthFix" class="image flex" style="width: 80rpx;height: 80rpx;box-shadow: 0rpx 7rpx 2rpx 0rpx #82C7BC;border: 4px solid #FFFFFF;border-radius: 50%;" src="/static/liwu.png"></image>
						<view class="one size12 mt5"  style="width: 100rpx;">用户名用户名</view>
					</view>
				</view>
				<view class="p30">
					<view class="bgfff p30 posire" style="border-radius: 10px;;">
						<view class="flex-a-i ">
							<view class="mr10" style="width: 6rpx;height: 24rpx;background: #24C891;border-radius: 3rpx;"></view>
							当期中奖
						</view>
						<view class="p30 flex-ju-b mt15" style="background: #ECF6FB;border-radius: 8px;">
							<view class="flex-a-i size12">
								<image class="flex mr10" style="width:50rpx;height:50rpx;border-radius: 50%;" src="/static/liwu.png"></image>
								用户名称
							</view>
							<view style="color:#FF0000;" class="size12">
								中奖的奖品名称
							</view>
						</view>
					</view>
				</view>
				<image mode="widthFix" class="posiab" style="top:0" src="/static/dangqian.png"></image>
			</view>
			
			<view class="size16 bold mt10">
				活动详情
				<image mode="widthFix" class="image mt10" src="/static/dangqian.png"></image>
			</view>
			
			
		</view>
		
		<view class="flex-ju-b bgfff p30" style="position: fixed;width:100%;bottom:0;z-index: 5;">
			<image mode="widthFix" class="image mr5 ml5" src="/static/gengduoyao.png"></image>
			<image mode="widthFix" class="image mr5 ml5" src="/static/zhuanfa.png"></image>
		</view>
		<u-popup
		  v-model="showModal"
		  mode="center"
		   isbg="transparent"
		  :closeable="false"
		  >
		  <view class="posire">
			  <view class="posiab bold" style="color:#4D4D4D;top:300rpx;margin-left: 50rpx;">
				  抽选码：80963
			  </view>
			  <view class="flex-ju-c">
				  <image class="image posiab" style="width:65vw;bottom:50rpx" mode="widthFix" src="/static/qiing.png"></image>
			  </view>
			  <image class="image" style="width:80vw;" mode="widthFix" src="/static/chouxuan.png"></image>
		  </view>
		  </u-popup
		>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showModal:true,
				systemInfoHeight: uni.getSystemInfoSync().statusBarHeight,
			}
		},
		methods: {
			touser(){
				uni.navigateTo({
					url:"/pages/index/canyu"
				})
			}
		}
	}
</script>

<style>
page{
	background: #DFE8ED;
}
</style>
